<template>
<div>
  <div class="whiteBg shop_info_hd">
    <div class="clearfix shop_info_detail">
      <span class="left">商户详情</span>
      <a @click="$router.push({name: 'merchDetail',query: {mchtId: orderInfo.mchtId}})" class="right">再去逛逛<i class="iconfont icon-right right"></i></a>
    </div>

    <div class="shop_info">
      <img class="left" :src="orderInfo.mchtLogUrl">
      <div class="clearfix shop_name">
        <span class="right color_red">¥{{orderInfo.mchtPer}}/人</span>
        <span class="comt_mcht_name">{{orderInfo.mchtName}}</span>
      </div>
      <div class="clearfix shop_type">
        <span class="left">{{orderInfo.mchtTypeValue}}</span>
        <span class="right">{{orderInfo.mchtArea}}</span>
      </div>
    </div>
    <div class="shop_consume" :style="{padding:isOrderState}">
      <!-- <span class="left">店内堂吃消费  ￥186元</span> -->
      <p v-if="isOrderState!=='success'&&isOrderState!=='Unship'&&isOrderState!=='Shipped'&&isOrderState!=='Receive'&&couponsType!=='present'&&couponsType!=='ticket'">
        <span class="bord_tit left ftbd">消费金额</span>
        <span class="left deal_discount">¥{{orderInfo.amt}}</span>
        <!-- <span v-if="couponTypes!='rebate'" class="left ftbd">¥{{orderInfo.amt-orderInfo.couponAmt*orderInfo.couponNum}}元</span> -->
        <span class="left ftbd">¥{{(orderInfo.amt*1000-orderInfo.couponAmt*1000)/1000 |formatMoney}}元</span>
        <span v-if="isOrderState == 'placed'" @click="payBill(orderInfo)" class="deal_btn_main margin_l" style="margin: .333rem">买单</span>
      </p>
    </div>
  </div>
  <div class="whiteBg mgt10 shop_coupon" v-if="orderCoupon.length>0">
    <div class="clearfix shop_coupon_detail">
      <span class="left">电子券详情</span>
    </div>
    <div class="shop_coupon_item clearfix" v-for="item in orderCoupon">
      <div v-if="item.type" class="couponDiv" :class="{'coupon_yellow':item.type=='cash','coupon_green':item.type=='rebate','coupon_blue':item.type=='voucher','coupon_orange':item.type=='present','coupon_purple':item.type=='ticket'}">
        <div class="_num" :class="{'coupon_color_y':item.type=='cash','coupon_color_g':item.type=='rebate','coupon_color_b':item.type=='voucher','coupon_color_o':item.type=='present','coupon_color_p':item.type=='purple'}">Coupon</div>
        <div class="_num_price">
          <coupon-num :num="item.denomination" :type="item.type"></coupon-num>
        </div>
        <div class="coupon_type">{{item.type | couponTp}}</div>
      </div>
      <div class="deal_i_con">
        <p class="shop_coupon_f"><span class="bord_tit">{{item.name}}</span></p>
        <p class="shop_coupon_p"><span class="right">×{{item.num}}(张)</span>
          <span class="shop_coupon_over">{{item.denomination | denomination(item.type)}}{{item.type|couponTp}}</span>
        </p>
      </div>
    </div>
  </div>
  <div class="whiteBg mgt10 order_detail">
    <h3>订单明细</h3>
    <p><span class="left">订单编号</span><span class="right">{{orderInfo.orderId}}</span></p>
    <p><span class="left">下单时间</span><span class="right">{{orderInfo.orderDate|endtimeStamp}}</span></p>
  </div>
</div>
</template>
<script>
import getData2 from '../../service/getData2.js'
import couponNum from '../../componentes/global/couponNum.vue'
import * as types from '../../vuex/types'
import * as types1 from '../../vuex/appendType'
import {
  mapState
} from 'vuex'
export default {
  name: "orderDetail",
  components: {
    couponNum
  },
  data() {
    return {
      orderInfo: '',
      orderCoupon: [],
      isOrderState: 0,
      couponTypes: '',
      couponsType: ''
    }
  },
  computed: {

  },
  methods: {
    //跳转买单
    payBill: function(item) {
      this.$router.push({
        'name': 'payIndex',
        query: {
          o: item.orderId,
          m: item.mchtId
        }
      });
    }
  },
  beforeRouteLeave(to, from, next) {

    next()
  },
  created: function() {
    var me = this;
    getData2.orderDetail({
      method: 'post',
      data: {
        couponNo: me.$route.query.couponNo,
        mchtId: me.$route.query.mchtId,
        orderId: me.$route.query.orderId,
        usrId: me.$route.query.usrId
      }
    }).then(function(rep) {
      me.orderInfo = rep.content.orderDetail[0];
      me.orderCoupon = rep.content.couponList;
      if (rep.content.couponList.length > 0) {
        me.couponTypes = rep.content.couponList[0].type;
      }
      me.isOrderState = me.$route.query.orderState;
      me.couponsType = me.$route.query.couponsType;
    })
    // this.$store.dispatch("orderDetail",{usrId:that.$route.params.usrId,orderId:that.$route.params.orderId}).then(function(rep){
    //     console.log(rep);
    // }).catch(function(rep){
    //     console.log(rep);
    // })

  }
}
</script>
<style scoped>
.shop_info {
  height: auto!important;
}

.shop_info .comt_mcht_name {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  color: #333;
}
</style>
